<template>
    <div class='cinema-page'>
        <div class='dir cinema'>
			<div class='dir-city'><div><i class='iconfont icon-sanjiao1'></i></div></div>
			<div class='dir-brand'><div><i class='iconfont icon-sanjiao1'></i></div></div>
			<div class='dir-characteristic'><div><i class='iconfont icon-sanjiao1'></i></div></div>
		</div>
        <div class='blacker'></div>
        <div class='cinema-list'>
            <div class='list-wrap'>
                <div class='content' v-html='cinemas'>影院</div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default{
    name:'cinema',
    data:function(){
        return {
            cinemas:''
        }
    },
    mounted(){
        axios
			.get(
				"/ajax/moreCinemas?day=2021-06-30&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1625040142266&cityId=62&optimus_uuid=689A5D80D8D611EBB79063E128DD6EEBEF880FE3D08F4A2D8F5969A1FDA61E2F&optimus_risk_level=71&optimus_code=10"
			)
			.then((res) => {
				console.log(res.data);
                this.cinemas=res.data;
			})
    }
}
</script>
<style >
.dir.cinema{
    margin-top: 156px;
    display: flex;
    position: fixed;
}
/* .cinema-list{
    padding-top: 5.226667rem;
} */
.list-wrap .content a{
    width:100%;
    background:#fff;
    margin-bottom: 1px;
}
.list-wrap .content a:last-child{
    margin-bottom: 51px;
}
.item.mb-line-b{
    margin-bottom: 0;
}
.title-block.box-flex.middle{
    width:95%;
    display: flex;
    flex-direction: column;
    margin:.026667rem auto;
    justify-items: center;
    align-content: center;
}
.title-block.box-flex.middle .title.line-ellipsis{
    flex:1;
    width:100%;
    font-size:16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    margin-top:10px;
    margin-bottom: 5px;
}
.title-block.box-flex.middle .title.line-ellipsis span:first-child{
    flex:1;
}
.title-block.box-flex.middle .title.line-ellipsis .price-block{
    margin-right:10px;
    color:crimson;
}
.price-block span{
    display: inline-block;
    font-size: 18px;
    margin-right:.133333rem;
}
.title-block.box-flex.middle .title.line-ellipsis .price-block span:last-child{
    display: inline-block;
    font-size: 11px;
}
.location-block.box-flex{
    width:100%;
    flex: 1;
    display: flex;
    align-items: center;
}
.location-block.box-flex div:first-child{
    display:inline-block;
    width:9.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size:13px;
}
.location-block.box-flex div:last-child{
    margin-right: 10px;
}
.label-block{
    flex-basis: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-bottom:10px;
}
.label-block>div{
    font-size:12px;
    margin-right: .08rem;
    border-radius: 2px;
    
}
.cinema-list .list-wrap .title-block .label-block div.snack, .cinema-list .list-wrap .title-block .label-block div.vipTag{
    border:1px solid #f90;
    color:#f90;
}
.cinema-list .list-wrap .title-block .label-block div.allowRefund, .cinema-list .list-wrap .title-block .label-block div.endorse, .cinema-list .list-wrap .title-block .label-block div.hallType, .cinema-list .list-wrap .title-block .label-block div.sell{
    color: #589daf;
    border: 1px solid #589daf;
}
.discount-block div{
    display: flex;
    margin-bottom: 5px;
    align-items: center;
}
.discount-block div .discount-label.normal.card{
    border-radius: 3px;
    background: none;
}
.discount-block div .discount-label.normal.card img{
    width:100%;
    height:100%;
}
.discount-block div .discount-label-text{
    flex:1;
    margin-left:10px;
}

</style>